<template>
  <div class="c-bg-sgray c-pt24 c-ph24">
    <template v-if="practiceMode == 1" class="c-pv20 c-ph24">
      <div @click="stylePractice(item)" v-for="(item, index) in styleList" :key="index" class="c-hh120 c-bg-white c-pl24 c-pr32 c-flex-row c-aligni-center c-justify-sb c-br12 c-mb20">
        <div>
          <div class="c-fs26 c-fc-xblack c-fw500">{{styleName[item.type]}}</div>
          <div class="c-fs20 c-fc-gray c-mt8">{{item.answerTotal}}/{{item.hasQuestionNum}} 道</div>
        </div>
        <div class="c-fs30 c-fc-gray iconfont">&#xe635;</div>
      </div>
      <loading-status-tem :noData="styleList == null || styleList.length == 0" :noDataText="'暂无收藏'"></loading-status-tem>
    </template>
    <section v-if="styleList.length" class="c-p-l0 c-flex-row c-pl32 c-pr24 c-aligni-center c-justify-sb c-bd-t1 c-hh88 c-pf c-p-b0 c-w100 c-maxw640 c-bg-white c-pz1">
      <div class="c-flex-grow1 c-flex-row c-aligni-center c-justify-end c-w0">
        <div class=" c-hh64 c-fs28 c-w0 c-flex-grow1">
          <div class="c-fc-white c-lh c-flex-row c-flex-center c-h c-br36 theme-bg" @click="clearCollect">清空我的收藏</div>
        </div>
      </div>
    </section>
  </div>
</template>
<script>
import { utilJs } from "@/utils/common.js";
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
// let searchText; //搜索输入框
export default {
  name: "PracticeModes",
  components: {
    loadingStatusTem
  },
  props: [],
  data() {
    return {
      practiceMode: 1,
      libraryId: 0,
      styleList: [],
      styleName: {
        '1': '单选题',
        '2': '多选题',
        '3': '问答题',
        '4': '判断题',
        '5': '填空题',
        '9': '阅读理解题',
        '10': '材料演示题',
        '11': '完型填空题',
      },
      chapterInfo: {},
      ttId: "",
      tpId: "",
      tlId: "",
      progress: "",
    };
  },
  created() {
    utilJs.appShare(this);
  },
  mounted() { },
  methods: {
    clearCollect(item) {
      let $this = this
      this.$cjConfirm({
        title: '',
        titleCenter: true, //标题是否居中
        message: '是否清空全部收藏', //弹窗内容
        messageCenter: true, //内容是否居中
        showMasker: true, //是否显示透明背景
        clickCloseModal: false, //是否点击透明背景关闭弹窗
        showCancelButton: true, //是否显示取消按钮
        cancelButtonText: '', //取消按钮文本
        confirmButtonText: '', //确认按钮文本
        onConfirm() {
          utilJs.postMethod(global.apiurl + 'itemBank/clearCollect', {
            libraryId: $this.libraryId,
          },
            res => {
              $this.$showCjToast({
                text: res,
                type: "success"
              });
              $this.getStyleList()
            },
            failRes => {
            }
          )
        }, //确认事件回调
        onCancel: null, //取消事件回调
      })
    },
    stylePractice(item) {
      if (item.testInfo.status == 2) {
        this.$routerGo(this, "push", {
          path: '/homePage/itemBank/questionResult',
          query: {
            examMainId: item.testInfo.examMainId,
            type: 6, //1:顺序练习 2:随机练习
            ttId: this.ttId,
            tpId: this.tpId,
            tlId: this.tlId,
            progress: 100,
          }
        })
      } else if (item.testInfo.status == 1) {
        this.$routerGo(this, "push", {
          path: '/homePage/itemBank/questionAnswer',
          query: {
            libraryId: this.libraryId,
            type: 6,
            questionType: item.type,
            goOnNum: item.answerTotal + 1 > item.hasQuestionNum ? item.answerTotal : item.answerTotal + 1,
            ttId: this.ttId,
            tpId: this.tpId,
            tlId: this.tlId,
            progress: this.progress,
          }
        })
      } else {
        this.takePartIn(6, item);
      }
    },
    //加入考试
    takePartIn(mode, item) {
      let $this = this;
      let data = {};
        data = {
          libraryId: this.libraryId,
          type: mode,
          questionType: item.type,
        }
      utilJs.postMethod(`${global.apiurl}itemBank/takePartIn`, data, function (
        res
      ) {
        let queryT = {
          libraryId: $this.libraryId,
          type: mode,
          goOnNum: 1,
          ttId: $this.ttId,
          tpId: $this.tpId,
          tlId: $this.tlId,
          progress: $this.progress,
          isCollect:1
        }
        queryT.questionType = item.type;
        $this.$routerGo($this, "push", {
          path: '/homePage/itemBank/questionAnswer',
          query: queryT
        })
      })
    },
    //获取收藏列表
    getStyleList() {
      let getUrl = global.apiurl + "itemBank/collectClassify?libraryId=" + this.libraryId
      utilJs.getMethod(getUrl, res => {
        this.styleList = res;
      })
    },
    //分享
    wechatShare: function () {
      let title = "练习列表";
      let shareImg = window.localStorage.getItem("shareLogo");
      let shareUrl =
        window.location.href.split("#")[0] +
        "#/homePage/itemBank/questionList" + "?refereeId=" +
        localStorage.getItem("userId")
      let shareDesc = window.localStorage.getItem("shareDesc");
      utilJs.wechatConfig(shareUrl, title, shareImg, shareDesc, function () { });
    },
    //手机端分享
    appShare: function () {
      var shareUrl =
        window.location.href.split("#")[0] +
        "#/homePage/itemBank/questionList" + "?refereeId=" +
        localStorage.getItem("userId");
      utilJs.appShareTrue("", "", shareUrl, "");
    },
  },
  activated() {
    this.practiceMode = this.$route.query.practiceMode || 1;
      setDocumentTitle("我的收藏");// eslint-disable-line
    this.libraryId = this.$route.query.libraryId || 0;
    this.styleList = [];
    this.chapterInfo = {};
    this.ttId = this.$route.query.ttId || "";
    this.tpId = this.$route.query.tpId || ""; //环节id
    this.tlId = this.$route.query.tlId || "";
    this.progress = this.$route.query.progress || "";
    if (this.practiceMode == 1) {
      this.getStyleList();
    }
    this.wechatShare();
  },
  deactivated() {
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
.bg-practice {
  background: linear-gradient(90deg, rgb(154, 170, 255) 0%, rgba(108, 131, 2555, 1) 100%);
}
.p-b-80 {
  bottom: -2rem;
}
</style>


